<template>
  <div class="role">
    <div class="usercon">
      <div class="content">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>权限管理</el-breadcrumb-item>
          <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-button style="margin:10px 0;">添加角色</el-button>
         <el-table ref="singleTable" :data="tableData5" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item>
                  <span>{{ props.row.authName }}</span>
                </el-form-item>
                <el-form-item>
                  <span>{{  }}</span>
                </el-form-item>
                <!-- <el-form-item label="商品 ID">
                  <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="店铺 ID">
                  <span>{{ props.row.shopId }}</span>
                </el-form-item>
                <el-form-item label="商品分类">
                  <span>{{ props.row.category }}</span>
                </el-form-item>
                <el-form-item label="店铺地址">
                  <span>{{ props.row.address }}</span>
                </el-form-item>
                <el-form-item label="商品描述"> 
                  <span>{{ props.row.desc }}</span>
                </el-form-item> -->
              </el-form>
            </template>
          </el-table-column>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="角色名称" prop="roleName" width="180"></el-table-column>
          <el-table-column label="角色描述" prop="roleDesc" width="180"></el-table-column>
          <el-table-column label="操作" prop="desc">
            <el-button type="primary" plain size="mini" is-circle class="btn">
              <i class="el-icon-edit"></i>
            </el-button>
            <el-button type="danger" plain size="mini" is-circle class="btn">
              <i class="el-icon-delete"></i>
            </el-button>
            <el-button type="success" plain size="mini" is-circle class="btn">
              <i class="el-icon-check"></i>
            </el-button>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
     

<script>
export default {
  name: "role",
  data() {
    return {
      tableData5: [],
      // a:[]
    };
  },
  methods: {
    //获取用户 列表
    getroles() {
      this.$http("roles", {}, "get", {
      }).then(res => {
        this.tableData5 = res.data;
        // this.a = res.data.data;
      });
    }, 
  },
  created() {
    this.getroles();
  }
};
</script>

<style scoped lang="scss">
.role {
  width: 100%;
  height: 100%;
  display: flex;
  overflow-y:scroll;
  .usercon {
    padding: 20px;
    margin: 60px 0 0 199px;
    flex: 1;
  }
  .content {
    height: 100%;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #ebeef5;
    padding: 20px;
  }
  .btn {
    border-radius: 50%;
    padding: 7px;
  }
}
</style>
